<template>
    <div class="home_search">
        <Head :left="true" title="商品列表"></Head>
        <div class="sub-child">
            <form action="/">
            <van-search
                v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
            />
        </form>
        </div>

        <div class="history_search">
            <div class="hhead">
                历史搜索
                <van-icon @click="delethistory" name="delete-o" size='16px' /> 
            </div>
            <div class="hcontent">
                
                <span @click="writeSearch(history)" v-for="(history,hs) in searchHistoryList" :key="hs">{{history}}</span>
                
            </div>
        </div>

        <div class="hot history_search">
            <div class="hhead">
                热门搜索
                
            </div>
            <div class="hcontent"> 
                <span @click="writeSearch(hot1)" class="hs1" v-for="(hot1,h1) in list" :key="'text'+ h1">{{hot1}}</span> 
                 <span @click="writeSearch(hot2)" class="hs2" v-for="(hot2,h2) in listafter" :key="'info'+h2">{{hot2}}</span>
                
            </div>
        </div>
        
    </div>
</template>

<script>
import {ContactList, Toast} from 'vant';
export default {
    data() {
    return {
      value:'',
      list:[],
      listafter:[],
      searchHistoryList:[],
    }
  },
   methods: {
    onSearch(val) {

        if(val){
            if(localStorage.getItem('searchHistoryList').indexOf(val)<0){
                  this.searchHistoryList=[...this.searchHistoryList,val];
            // console.log(this.searchHistoryList)
                localStorage.setItem('searchHistoryList',JSON.stringify([...this.searchHistoryList]));
            }
          
            this.value='';

            this.$router.push({name:"goodslist",query:{key:val}})

        }else{
             this.$router.push({name:"goodslist"})
        }
   
    

    },
    onCancel() {
      Toast('取消');
    },
    writeSearch(name){
        this.value=name
    },
    delethistory(){
        this.searchHistoryList=[]
        localStorage.setItem('searchHistoryList',[])
    },
  },
  mounted(){
      this.$ajax.getWruruSearch().then(res=>{
        //   console.log(res)
        var arr =res.response_data[0]   
        // console.log(arr)
        this.list=arr.splice(0,4)
        // console.log(this.list)
        this.listafter=arr
      });

      this.searchHistoryList=JSON.parse(localStorage.getItem('searchHistoryList'))

      if(!localStorage.getItem('searchHistoryList')){
           this.searchHistoryList=[]
        localStorage.setItem('searchHistoryList',[])
      }
  },
}
</script>

<style lang="scss" scoped>
    .history_search{
        background-color: #fff;
        font-size: 15px;

        .hhead{
            display: flex;
            padding: 6px;
            border-bottom: 1px solid #ddd;
            justify-content: space-between;
        }
        .hcontent{
            display: flex;
            padding: 6px;
            flex-wrap: wrap;
            span{
                padding: 2px 5px;
                margin: 0 0 6px 12px;
                border: 1px solid #333;
                text-align: center;
                font-size: 12px;
                line-height: 16px;
                border-radius: 3px;
            }
            .hs1{
                background: #fff5e9;
                color: #f04f54;
                 border: 1px solid #f04f54;
            }
            .hs2{
                    background-color:  #fff;
                    color:  #969799;
                    border: 1px solid #969799;
            }
        }
    }

</style>